<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入要查询的城市: <input type="text" id="city">
<div id="container" style="min-width:400px;height:400px"></div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script>
    $("#city").blur(function(){
        var city = $(this).val();
        $.ajax({
            url:"wea.php",
            data:{city:city},
            dataType:"json",
            type:"post",
            success:function(e){
                // console.log(e);
                var week = "";
                var temp_low ="[";
                var temp_high ="[";
                $.each(e,function(i,v){
                    week+=v.week+",";
                    temp_low+=v.temp_low+",";
                    temp_high+=v.temp_high+",";
                });
                week = week.substring(0,27);
                week = week.split(",");
                temp_low+="]";
                temp_high+="]";
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'spline'
                    },
                    title: {
                        text: '一周的高低气温'
                    },
                    subtitle: {
                        text: '数据来源:1607C.com'
                    },
                    xAxis: {
                        categories: week
                    },
                    yAxis: {
                        title: {
                            text: '温度'
                        },
                        labels: {
                            formatter: function () {
                                return this.value + '°';
                            }
                        }
                    },
                    tooltip: {
                        crosshairs: true,
                        shared: true
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                radius: 4,
                                lineColor: '#666666',
                                lineWidth: 1
                            }
                        }
                    },
                    series: [{
                        name: '最高温',
                        marker: {
                            symbol: 'square'
                        },
                        data: eval(temp_high)
                    }, {
                        name: '最低温',
                        marker: {
                            symbol: 'diamond'
                        },
                        data: eval(temp_low)
                    }]
                });

            }
        })
    })
</script>